<template>
	<view class="container">

		<view class="bg-view">
			<view class="bg_box">
				<!-- 顶部状态栏 -->
				<view class="top-nav"
					:style="'height:' + (titleBarHeight+titleBarHeight) + 'px;position:fixed;top:0;width:100vw;'">
					<view class="status_nav"
						:style="'height:' + statusBarHeight + 'px;position:fixed;top:0;width:100vw;'"></view>
					<view class="left-button-box" :style="'height:'+ titleBarHeight +'px;top:'+ statusBarHeight +'px;'"
						@click="tapToBack('back')">
						<image src="../../static/back.png" mode="aspectFill"></image>
					</view>
					<view
						:style="'height:'+ titleBarHeight +'px;line-height:'+ titleBarHeight + 'px;top:'+ statusBarHeight +'px;position:fixed;width:100vw;'"
						class="Index_tab_top">
						<view class="mine-txt">超值推荐</view>
					</view>
				</view>
				<view :style="'width: 100vw;height:'+(titleBarHeight+titleBarHeight)+'px;'"></view>

				<view class="title_one">
					<view class="title_top">
						<view class="view1">今日精选 ｜ 爆款直降</view>
					</view>
				</view>

			</view>

			<image src="https://imgs.ynz666.com/test/2023/08/01/M2E3YzUzM2ZkM2E1NDIwZTQ4NDcxOTE5MmMxZjU3MDE=.png"
				mode="widthFix" class="bg-image "></image>
		</view>
		
		
		<view class="con">
			<view class="item" v-for="(item,index) in shopList" :key="index">
				<image
					:src="item.goodsImages[0]?item.goodsImages[0]:'../../static/lazy_index.png'"
					mode="scaleToFill" class="item_left"></image>
				<view class="item_right">
					<view class="name">
						{{item.goodsName}}
					</view>
					<view class="desc">
						<view :class="indexI==0?'view1':'view2'" v-for="(i,indexI) in item.goodsTag" :key="indexI">
							{{i}}
						</view>
					<!-- 	<view class="view2">
							鲜香美味
						</view> -->
					</view>
					<view class="price">
						<view class="view1">
							￥
							<text>{{item.price}}</text>
						</view>
						<view class="view2">
							<HbNumberBox v-model="item.num"></HbNumberBox>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		
		<view class="fot">
			<view class="left">
				1
			</view>
			<view class="right">
				<view class="view1">
					已选{{totalNum}}件，合计: 
					<text class="text1">¥</text>
					<text class="text2">{{totalPrice}}</text>
				</view>
				<view class="view2" @click="footBill">
					去买单
				</view>	
			</view>
		</view>


	


	</view>
</template>

<script>
	var app = getApp();
	import customTabbar from '../../components/custom-tabbar/custom-tabbar.vue';
	import HbNumberBox from '../../components/hb-number-box/hb-number-box.vue';
	// import http from '@/utils/request/http.js';
	import {
		getWalletDetail,
		getWalletLog,
		GetGoodsList,
		getIUserDiscount
	} from '../../apis/index.js';
	import env from '@/env/index.js';
	import painter from '@/wxcomponents/painter/painter';
	export default {

		components: {
			customTabbar,
			painter,
			HbNumberBox
		},
		data() {
			return {
				aa:2,
				statusBarHeight: 0,
				titleBarHeight: 0,
				bottomTabbar: 0,
				menuButtonInfo: {},
				mineInfo: {},
				saleDate:{},
				par: {
					type: 0,
					page: 1,
					pageSize: 10,
					walletType: 2,
				},
				packetList: [],
				isLastPage: false,
				
				
				storeId:'',
				shopList:[],
				shopPage:1,
				shopPageSize:10,
				shopLastPage:false,
				
				goodList:[
					{
						name:'111',
						price:22.5,
						num:0
					},
					{
						name:'222',
						price:10,
						num:0
					},
					{
						name:'333',
						price:49,
						num:0
					}
				],
			};
		},

		onLoad(options) {
				console.log(options,'storeDetail')
				this.storeId = options.id;
		},
		onReady() {
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			this.titleBarHeight = (uni.getMenuButtonBoundingClientRect().top - this.statusBarHeight) * 2 + uni
				.getMenuButtonBoundingClientRect().height;
			this.bottomTabbar = uni.getStorageSync('bottomTabbar');
			this.menuButtonInfo = uni.getMenuButtonBoundingClientRect();
		},
		onShow() {
			this.mineInfo = uni.getStorageSync('mineInfo');
			this.bottomTabbar = uni.getStorageSync('bottomTabbar');
			this.shopGroupList();
		},
		onShareAppMessage(res) {

		},
		onReachBottom() {
			console.log("ddd")
			if (!this.shopLastPage) {
				this.shopPage++;
				this.shopGroupList();
			}
		},
		computed:{
			totalPrice() {
				let totalPrice = 0
				this.shopList.map(item => {
					totalPrice += item.num * item.price
				})
				return totalPrice.toFixed(2); // 保留两位小数（否则会价格会出现多位小数）
			},
			totalNum() {
				let totalNum = 0
				this.shopList.map(item => {
					totalNum += item.num
				})
				return totalNum;
			}
		},
		methods: {
			//  获取商品列表
			shopGroupList(){
				let that = this;
				GetGoodsList({
					page:that.shopPage,
					pageSize:that.shopPageSize,
					businessId:that.storeId,
					goodsType:2,
				}).then( res => {
					switch(res.code){
						case 200:
							// that.moreTip = list.data.data.length>2?'+展开看看':'没有更多商品了';
							// if(list.data.data && list.data.data.length>0){
								// that.shopList = that.shopList.concat(list.data.data);
								// uni.setStorageSync('shopList',that.shopList);
							// }
							if (that.shopPage == 1 && res.data.data.length <= 0) {
								that.shopList = [];
								return;
							}
							if (res.data.data.length > 0) {
								that.shopList = that.shopPage == 1 ? res.data.data.map(item => {
									return Object.assign({
										num: 0
									}, item)
								}) : that.shopList.concat(res.data.data.map(item => {
									return Object.assign({
										num: 0
									}, item)
								}));
								that.shopLastPage = res.data.is_last_page;
							}
							console.log(that.shopList,"shopList---")
						break;
						default:
							uni.showToast({
								title:list.message,
								icon:"none"
							})
						break;
					}
				})
			},
			footBill(){
				console.log(this.totalNum,"totalNum")
				if(this.totalNum==0){
					uni.showToast({
						title: '请选购买商品',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				// let arr=this.shopList.filter(item => item.num>0).map(item => {
				// 		return Object.assign({
				// 			num:item.num,
				// 			id:item.id
				// 		},)
				// })
				let arr=this.shopList.filter(item=>item.num>0).map(item => {
						return Object.assign({
							num:item.num,
							goodsId:item.id,
							// goodsName:item.goodsName,
							// goodsImg:item.goodsImages[0]?item.goodsImages[0]:'',
							// goodsPrice:item.price
						})
				})
				console.log(arr,"arr")
				uni.setStorageSync('shopBuyList',arr);
				uni.navigateTo({
					url: `/pageD/billDetail/billDetail?storeId=${this.storeId}`
				});
				// this.getIUserDiscountData(arr)
			},
			getIUserDiscountData(arr){
				let data={
					goodsInfo:arr,
					storeId:this.storeId,
				}
				getIUserDiscount(data).then(res=>{
					this.detailData=res.data
					
					uni.navigateTo({
						url: `/pageD/billDetail/billDetail`
					});
				})
			},
			openPage(pageBig, page) {
				uni.navigateTo({
					url: `/${pageBig}/${page}/${page}`
				})
			},
			navClick(index) {
				this.packetList=[]
				this.par.page=1
				this.par.type = this.navIndex = index
				this.SaleDetails()
			},
			jumpPage() {
				uni.navigateTo({
					url: `/pageC/earnings/earnings`
				});
			},
			// 返回按钮
			tapToBack(page) {
				// console.log(1)
				switch (page) {
					case 'index':
						uni.switchTab({
							url: '../index/index'
						})
						break;
					case 'back':
						// console.log(2)
						uni.navigateBack({
							delta: 1,
							fail() {
								uni.switchTab({
									url: '../index/index'
								})
							}
						})
						break;
				}
			},
			SaleDate() {
				let that = this;
				getWalletDetail({
					walletType: 2
				}).then(res => {
					that.saleDate = res.data
					// console.log(that.saleDate,"that.saleDate")
				})
			},
			SaleDetails() {
				let that = this;
				getWalletLog(this.par).then(res => {
					that.packetList = that.par.page == 1 ? res.data.data.map(item => {
						return Object.assign({
							amountTow: item.amount / 100
						}, item)
					}) : that.packetList.concat(res.data.data
						.map(item => {
							return Object.assign({
								amountTow: item.amount / 100
							}, item)
						}));
					that.isLastPage = res.data.is_last_page;
					console.log(that.packetList, "that.packetList")
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f4f4f4;
	}

	.container {}

	.left-button-box {
		// width: 160rpx;
		// background-color: rgba(255, 255, 255, 0.5);
		// border-radius: 40rpx;
		display: flex;
		// justify-content: center;
		align-items: center;
		// margin-left: 30rpx;
		// border: 1rpx solid rgba(224, 224, 224, 0.6);
		position: absolute;
		left: 30rpx;
		z-index: 7;

		.line {
			height: 30rpx;
			background: #CCCCCC;
			width: 1rpx;
		}

		image {
			width: 30rpx;
			height: 30rpx;
			margin: 0 20rpx;
		}
	}

	.top-nav {
		// background: linear-gradient(180deg, #F77539 0%,rgba(0,0,0,0) 100%);
		position: relative;
		z-index: 5;
		// image {
		// 	width: 100%;
		// 	height: 100%;
		// 	// position: absolute;top: 0;left: 0;
		// 	z-index: -1;
		// }
		// .img{
		// 	width: 188rpx;
		// 	height: 36rpx;
		// }
	}

	.title_one {
		margin: 0 20rpx;
		// padding-top: 40rpx;
		position: relative;

		.title_top {
			margin: 0 25rpx;
      display: flex;
			justify-content: center;
			.view1 {
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				opacity: 0.8;
			}

			.view2 {
				display: flex;
				align-items: center;
				margin-top: 4rpx;
				.view2_left{
					font-size: 60rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
				}
				.view2_right{
					margin-left: 24rpx;
					width: 110rpx;
					height: 48rpx;
					background: #FFFFFF;
					border-radius: 26rpx;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #F43B00;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}
		.rule{
			position: absolute;
			right: 20rpx;
			top: 20rpx;
			display: flex;
			align-items: center;
			opacity: 0.7;
			.img{
				width: 28rpx;
				height: 28rpx;
			}
			.text{
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				padding-left: 4rpx;
			}
		}
	}
	
	.con{
		margin:20rpx 20rpx 0;
		padding: 0 0 166rpx 0;
		.item{
			padding: 32rpx 24rpx 32rpx 10rpx;
			height:160rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			margin-bottom: 20rpx;
			display: flex;
			.item_left{
				width: 160rpx;
				height: 160rpx;
				border-radius: 4rpx;
			}
			.item_right{
				padding-left: 30rpx;
				flex: 1;
				.name{
					font-size: 28rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #000000;
				}
				.desc{
					margin: 12rpx 0;
					display: flex;
					align-items: center;
					
					.view1{
						height: 40rpx;
						background: #FBE6E0;
						border-radius: 23rpx;
						padding: 0 15rpx;
						display: flex;
						align-items: center;
						font-size: 22rpx;
						font-weight: 400;
						color: #F43B00;
						margin-right: 20rpx;
					}
					.view2{
						height: 40rpx;
						background: #F5F3F3;
						border-radius: 23rpx;
						padding: 0 15rpx;
						display: flex;
						align-items: center;
						font-size: 22rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #666666;
					}
				}
				.price{
					display: flex;
					align-items: center;
					justify-content: space-between;
					.view1{
						font-size: 24rpx;
						font-family: PingFangSC-Semibold, PingFang SC;
						font-weight: 600;
						color: #F43B00;
						text{
							font-size: 36rpx;
						}
					}
				}
			}
		}
	}
	
	.fot{
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 166rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -2rpx 6rpx 1rpx rgba(240,240,240,0.5);
		display: flex;
		z-index: 9;
		.left{
			opacity: 0;
			flex: 1;
		}
		.right{
			
			display: flex;
			align-items: center;
			padding-bottom: 24rpx;
			padding-right: 20rpx;
			.view1{
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				display: flex;
				align-items: center;
				.text1{
					color: rgba(244, 59, 0, 1);
				}
				.text2{
					font-size: 32rpx;
					color: rgba(244, 59, 0, 1);
				}
			}
			.view2{
				margin-left: 40rpx;
				width: 120rpx;
				height: 68rpx;
				background: linear-gradient(317deg, #F43B00 0%, #FA6D00 100%);
				border-radius: 34rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 22rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
			}
		}
	}

	/* 背景 */
	.bg-view {
		width: 100vw;
		height: 247rpx;

		.bg_box {
			height: 247rpx;
			// background: linear-gradient(180deg, #F77539 0%, #FEFDFB 100%);
		}

		.bg-image {
			z-index: -1;
			display: block;
			width: 100%;
			height: 247rpx;
			position: absolute;
			top: 0;
			left: 0;
		}
	}

	.status_nav {
		width: 100vw;
	}

	.Index_tab_top {
		font-size: 38rpx;
		font-weight: 500;
		color: #141414;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 5;

		.scan-box {
			margin-left: 30rpx;
			width: 160rpx;
			height: 58rpx;
			background: rgba(255, 255, 255, 0.1);
			border-radius: 28rpx;
			border: 1rpx solid #FA6400;
			font-size: 24rpx;
			font-weight: bold;
			color: #FFFFFF;
			line-height: 58rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 28rpx;
				height: 28rpx;
				margin-right: 4rpx;
			}
		}

		.mine-txt {
			color: #fff;
			font-size: 32rpx;
		}
	}

	.share-mission {
		background-color: #fff;
		padding: 20rpx 20rpx 115rpx 20rpx;
	}

	.share-mission-title {
		margin: 20rpx 0;
		font-size: 36rpx;
		font-weight: bold;
		color: #333333;

		view:nth-child(2) {
			font-size: 24rpx;
			color: #999999;
			margin-top: 8rpx;
		}
	}

	.share-mission-list {
		padding: 20rpx 0;
	}

	.share-mission-item {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.mission-left {
			display: flex;
			align-items: center;
		}

		.share-no {
			width: 46rpx;
			height: 46rpx;
			line-height: 46rpx;
			border-radius: 50%;
			background: #FF4D4F;
			font-size: 24rpx;
			font-weight: bold;
			color: #FFFFFF;
			text-align: center;
			margin-right: 20rpx;
		}

		.share-content {
			view:nth-child(1) {
				font-size: 28rpx;
				font-weight: bold;
				color: #333333;
				line-height: 40rpx;
				margin-bottom: 4rpx;
			}

			view:nth-child(2) {
				font-size: 22rpx;
				color: #666666;
				line-height: 30rpx;
			}
		}

		.share-btn {
			width: 100rpx;
			height: 48rpx;
			line-height: 48rpx;
			border-radius: 24rpx;
			border: 1rpx solid #FF4D4F;
			font-size: 22rpx;
			font-weight: bold;
			color: #FF4D4F;
			text-align: center;
		}

		.button-re {
			position: relative;

			button {
				width: 100rpx;
				height: 48rpx;
				border-radius: 24rpx;
				position: absolute;
				top: 0;
				left: 0;
				opacity: 0;
				border: 1rpx solid red;
			}
		}
	}

	.share-progress {
		width: 1rpx;
		height: 50rpx;
		background-color: #efefef;
		margin-left: 24rpx;
	}

	// banner广告
	.index-banner {
		width: 710rpx;
		height: 180rpx;
		margin: 0 auto;
		margin-top: -85rpx;
		border-radius: 12rpx;
		position: relative;

		swiper,
		swiper-item {
			width: 710rpx;
			height: 180rpx;
		}

		image {
			width: 710rpx;
			height: 180rpx;
			display: block;
			border-radius: 12rpx;
		}
	}


	// 数据中心
	.date-center {
		margin: 30rpx 0 56rpx 0;
		padding: 0 20rpx;
	}

	.date-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		margin-bottom: 20rpx;
	}

	.date-box {
		background: #FFFFFF;
		border-radius: 12rpx;
		padding: 48rpx;
	}

	.date_topBox {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.view1 {
			font-size: 26rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
		}

		.view2 {
			font-size: 36rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #F43B00;
			margin: 8rpx 0;
		}

		.view3 {
			min-width: 116rpx;
			height: 40rpx;
			background: #F4F4F4;
			border-radius: 20rpx;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #666666;
			padding: 0 32rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.date_botBox {
		margin-top: 40rpx;
		display: flex;
		justify-content: space-between;
		text-align: center;
	}

	.date-item {

		view:nth-child(1),
		view:nth-child(3) {
			font-size: 24rpx;
			color: #868A93;
		}

		view:nth-child(2) {
			font-size: 44rpx;
			font-weight: bold;
			color: #141414;
			line-height: 62rpx;
		}

		view:nth-child(3) {
			color: #8C8C8C;
		}
	}

	.kefu {
		font-size: 24rpx;
		color: #999999;
		text-align: center;
		text-decoration: underline;
		padding-bottom: 100rpx;
	}

	.mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.85);
		z-index: 10000;

		.poster {
			width: 650rpx;
			position: absolute;
			top: 50%;
			transform: translateY(-65%);
			left: 50%;
			margin-left: -325rpx;
		}

		.down-box {
			position: fixed;
			width: 100vw;
			bottom: 0;
			left: 0;
			background-color: #fff;
			border-radius: 44rpx 44rpx 0 0;
			padding: 60rpx 0;
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;
			font-size: 24rpx;
			color: #333333;

			image {
				margin-bottom: 8rpx;
				width: 58rpx;
				height: 58rpx;
				border-radius: 50%;
			}
		}
	}
</style>
